<template>
  <el-dialog :title="title" :visible.sync="visible" width="1190px" append-to-body :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="24" class="mb8">
        <el-col :span="18">
          <el-form-item label="链路ID" prop="traceId">
            <el-input v-model="form.traceId" :disabled="true">
              <el-button slot="append" icon="el-icon-document-copy" v-clipboard="form.traceId"
                         v-clipboard:success="copySuccessHandle"
                         v-clipboard:error="copyErrorHandle"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button icon="el-icon-download" type="text" @click="exportTxt">导出日志信息</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb8">
        <el-col :span="6">
          <el-form-item label="服务名" prop="serviceName">
            <el-input v-model="form.serviceName" :disabled="true" style="width:200px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="告警时间" prop="alarmTime">
            <el-input v-model="form.alarmTime" :disabled="true" style="width:170px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人" prop="chargeUserName">
            <el-input v-model="form.chargeUserName" :disabled="true" style="width:130px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="告警标识" prop="stackHash">
            <el-input v-model="form.stackHash" :disabled="true" style="width:150px;">
            <el-button slot="append" icon="el-icon-document-copy" v-clipboard="form.stackHash"
                       v-clipboard:success="copySuccessHandle"
                       v-clipboard:error="copyErrorHandle"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb8">
        <el-col :span="12">
          <el-form-item label="代码文件" prop="errorFileName">
            <el-input v-model="form.errorFileName" :disabled="true">
              <el-button slot="append" icon="el-icon-document-copy" v-clipboard="form.errorFileName"
                         v-clipboard:success="copySuccessHandle"
                         v-clipboard:error="copyErrorHandle"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请求地址" prop="requestUri">
            <el-input v-model="form.requestUri" :disabled="true">
            <el-button slot="append" icon="el-icon-document-copy" v-clipboard="form.requestUri"
                       v-clipboard:success="copySuccessHandle"
                       v-clipboard:error="copyErrorHandle"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb8">
        <el-col :span="24">
          <div class="scroll-container" style="height: 350px;overflow: auto;">
            <json-viewer :value="form.logMessage == null ? {} :  form.logMessage"
                         :expand-depth=1
                         :expanded="true"
                         copyable
                         :boxed="false"></json-viewer>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
  import {logDetail} from "@/api/hawkeye/alarmlog";
  import JsonViewer from 'vue-json-viewer'

  export default {
    name: "ModalForm",
    components: {
      JsonViewer
    },
    data() {
      return {
        // 弹出层标题
        title: "",
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        visible: false
      };
    },
    methods: {
      open(row) {
        this.reset();
        logDetail(row.baseAlarmId).then(response => {
          let data = response.data;
          data.serviceName = `${data.serviceCnName ? data.serviceCnName : 'unknown'}(${data.serviceZnName ? data.serviceZnName : 'unknown'})`;
          this.form = data;
          this.visible = true;
          this.title = "查看";
        });
      },
      // 复制成功回调函数
      copySuccessHandle(value) {
        this.$modal.msgSuccess("内容已复制到剪切板,可进行粘贴");
      },
      // 复制失败回调函数
      copyErrorHandle(value) {
        this.$modal.msgError("复制失败,请确认浏览器支持复制功能");
      },
      exportTxt() {
        this.download('/hawk-eye/log/export-log-txt?baseAlarmId=' + this.form.baseAlarmId, {}, `告警日志_${new Date().getTime()}.txt`)
      },
      // 表单重置
      reset() {
        this.form = {
          chargeUserId: null,
          traceId: null,
          serviceName: null,
          requestUri: null,
          alarmTime: null,
          stackTrace: null,
          errorName: null,
          errorMessage: null,
          errorFileName: null,
          stackHash: null
        };
        this.resetForm("form");
      }
    }
  }
</script>
